import React from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import {
  WeaLeftRightLayout,
  WeaTop,
  WeaTab,
  WeaNewScroll,
  WeaRightMenu,
} from "ecCom";
import AttentionOrgTreeSelect from "./AttentionOrgTreeSelect";
import PersonalIndexView from "./PersonalIndexView";
import RiskManagerView from "./RiskManagerView";
import ExecAssess from "./ExecAssessView";
import YearInventory from "./YearInventory";
import * as Util from "../../../util/Util";
import { i18n } from "../../../public/i18n";

@inject("individualMainStore")
@observer
export default class MyPortraitView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      collectParams :{
        favname: i18n.module.individualPortrait(),
        favouritetype: 5,
        link: '/spa/workrelate/static/index.html#/main/workrelate/portrait/individualPortraitIndex',
        importantlevel: 1,
    },
    }
    this.store = this.props.individualMainStore;
  }
  componentWillMount(){
    this.store.activeTabKey = "0";
    this.store.activeTreTabKey = "1";
  }

  render() {
    const { individualMainStore: store } = this.props;
    const {
      topBtnAndMenu,
      title,
      tabConfig: { mainTab },
      activeTabKey,
      onMainTabChange,
      hrmid,
      hasRight,
    } = store;
    const { iconProps } = topBtnAndMenu();
    const { collectParams } = this.state;
    return (
      <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@a2ydh6`} collectParams={collectParams}>
        <div className="wea-workrelate-risk-portrait-container">
          <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@82govj`}
            isNew={true}
            leftWidth={220}
            leftCom={<AttentionOrgTreeSelect ecId={`${this && this.props && this.props.ecId || ''}_AttentionOrgTreeSelect@cs77kk`} />}
            onCollapse={() => this.store.onMainCollapse()}
          >
            <div className="wea-workrelate-risk-portrait-right-container">
              <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@3bl55f`}
                title={title}
                icon={iconProps.icon}
                iconBgcolor={iconProps.color}
              ></WeaTop>
              <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@xrdcj0`}
                datas={toJS(mainTab).tabs}
                keyParam={toJS(mainTab).keyParam} //主键
                selectedKey={activeTabKey}
                onChange={(v) => onMainTabChange(v)}
              />
              <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@jw57y1`} height={Util.getCurrentHeight() - 109}>
                <div className="content-wrapper">
                  {activeTabKey === "0" && <PersonalIndexView ecId={`${this && this.props && this.props.ecId || ''}_PersonalIndexView@d61yl4`} />}
                  {activeTabKey === "3" && <RiskManagerView ecId={`${this && this.props && this.props.ecId || ''}_RiskManagerView@lt3qu2`} />}
                  {activeTabKey === "2" && <ExecAssess ecId={`${this && this.props && this.props.ecId || ''}_ExecAssess@jy48q8`} />}
                  {activeTabKey === "1" && (
                    <YearInventory ecId={`${this && this.props && this.props.ecId || ''}_YearInventory@wr3cpd`} userid={hrmid} hasRight={hasRight} />
                  )}
                </div>
              </WeaNewScroll>
            </div>
          </WeaLeftRightLayout>
        </div>
      </WeaRightMenu>
    );
  }
}
